﻿<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>不想起名|管理文章</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <%
        String context = request.getContextPath();
    %>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link rel="shortcut icon" href="../img/favicon.ico"/>
    <!-- 新 Bootstrap5 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.6.1/css/bootstrap.min.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
    <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
    <script src="https://cdn.staticfile.org/popper.js/2.9.3/umd/popper.min.js"></script>
    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.6.1/js/bootstrap.min.js"></script>
    <script src="../js/jquery.pagination.js"></script>
    <link rel="stylesheet" href="../css/pagination.css">
    <script src="../js/blog.js"></script>
    <script>
        function getSubCatagory() {
            let main_id = $("#main_id").val();
            let sub_id = $("#sub_id");
            if (main_id != 0) {
                $.ajax({
                    dataType: "json",    //数据类型为json格式
                    type: "GET",
                    url: "<%=context %>/servlet/CategoryServlet?action=ajaxsub",
                    data: {"main_id": main_id},
                    success: function (data) {
                        sub_id.empty();
                        sub_id.append('<option value="0">————</option>');
                        $.each(data, function (key, val) {
                            sub_id.append('<option value="' + key + '">' + val + '</option>');
                        })
                    },
                    error: function () {
                        alert("获取分类失败");
                    }
                })
            } else {
                sub_id.empty();
                sub_id.append('<option value="0">————</option>');
            }
        }

        function deletePost(id) {
            if (confirm("确定删除文章？")) {
                $.ajax({
                    type: "POST",
                    async: true,
                    url: "<%=context %>/servlet/PosteditServlet",
                    data: {
                        "action": "delete",
                        "id": id
                    },
                    success: function (data) {
                        alert(data);
                        window.location.reload();
                    },
                    error: function () {
                        alert("请求失败");
                    },
                    dataType: "text"
                })
            }
        }

        // 点击分页按钮以后触发的动作
        function handlePaginationClick(new_page_index, pagination_container) {
            $("#postForm").attr("action", "<%=context %>/servlet/PostlistServlet?role=1&pageNum=" + (new_page_index + 1));
            $("#postForm").submit();
            return false;
        }
        $(function () {
            $("#News-Pagination").pagination(${result.totalRecord}, {
                items_per_page:${result.pageSize}, // 每页显示多少条记录
                current_page: ${result.currentPage} -1, // 当前显示第几页数据
                num_display_entries: 3, // 分页显示的条目数
                next_text: "下一页",
                prev_text: "上一页",
                num_edge_entries: 2, // 连接分页主体，显示的条目数
                callback: handlePaginationClick
            });
        })
    </script>
</head>

<body>
<%--获取session，若是没有登录则跳转到登录界面--%>
<%
    if (session.getAttribute("username") == null) {
%>
<%--调用下面的模态框提示登录--%>
<script>
    $(function () {
        $('#staticBackdrop').modal('show')
    });
</script>
<%
    }
%>
<!-- 模态框 -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1"
     aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">未登录！</h5>
            </div>
            <div class="modal-body">
                管理员登录之后方可管理界面
            </div>
            <div class="modal-footer">
                <a href="../login.html" type="button" class="btn btn-outline-primary">登录</a>
            </div>
        </div>
    </div>
</div>
<%--导航栏，bootstrap自带--%>
<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
    <a class="navbar-brand" href="">
        <img class="rounded img-fluid" src="../img/avatar.jpg" width="48" height="48" alt="个人头像">
    </a>
    <!-- Links -->
    <ul class="navbar-nav">
        <li class="nav-item">
            <a href="<%=context %>/servlet/PostlistServlet?role=1"
               class="nav-link">查看文章</a>
        </li>
        <li class="nav-item">
            <a href="<%=context %>/admin/addpost.jsp" class="nav-link">写文章</a>
        </li>
        <li class="nav-item">
            <a href="<%=context %>/servlet/CategoryServlet?action=getall"
               class="nav-link">文章分类</a>
        </li>
        <li class="nav-item">
            <a href="<%=context %>/index.html" class="nav-link">返回首页</a>
        </li>
        <li>
            <a href="javascript:scroll(0,0)" class="nav-link">回到顶部</a>
        </li>
    </ul>
</nav>
<%--容器，存储下面的card--%>
<div class="container-fluid">
    <div class="row">
        <div id="list" class="col-12">
            <%--card组件--%>
            <div class="card bg-light text-dark" style="margin: 2%">
                <div class="card-header">
                    <div class="row">
                        <div class="col-5">
                            <h4>文章管理</h4>
                        </div>
                        <div class="col-7">
                            <%--筛选部分--%>
                            <form class="form-horizontal form-inline"
                                  action="<%=context %>/servlet/PostlistServlet?role=1"
                                  method="post" id="postForm">
                                <label for="main_id">一级分类：</label>
                                <select class="form-control" name="main_id" id="main_id" onchange="getSubCatagory()"
                                        style="margin-right: 5%">
                                    <option value="0">显示全部</option>
                                    <c:forEach items="${mainCategory}" var="category">
                                        <option value="${category.id }">${category.name }</option>
                                    </c:forEach>
                                </select>
                                <label for="sub_id">二级分类：</label>
                                <select class="form-control" name="sub_id" id="sub_id" style="margin-right: 5%">
                                    <option value="0">————</option>
                                </select>
                                <button type="submit" class="btn btn-outline-success">过滤</button>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <!-- 后台返回结果为空 -->
                    <c:if test="${fn:length(result.dataList) eq 0 }">
                        <div class="alert alert-warning" role="alert">
                            没有查询到数据！
                        </div>
                    </c:if>
                    <!-- 后台返回结果不为空 -->
                    <c:if test="${fn:length(result.dataList) gt 0 }">
                        <table class="table table-hover table-bordered">
                            <thead>
                            <tr>
                                <th>标题</th>
                                <th>主分类</th>
<%--                                <th>二级分类</th>--%>
                                <th>日期</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <c:forEach items="${result.dataList }" var="article">
                            <tr>
                                <td><c:out value="${article.title }"></c:out></td>
                                <td><c:out value="${article.main_id }"></c:out></td>
                                    <%--                                <td><c:out value="${article.sub_id }"></c:out></td>--%>
                                <td><c:out value="${article.createdate }"></c:out></td>
                                <td>
                                    <a href="<%=context %>/servlet/PostlistServlet?role=3&id=${article.id }"
                                       class="btn btn-outline-primary">
                                        修改
                                    </a>
                                    <button type="button" class="btn btn-outline-danger"
                                            onclick="deletePost(${article.id })">删除
                                    </button>
                                </td>
                            </tr>
                            </c:forEach>
                            </tbody>
                        </table>
                    </c:if>
                    <div class="text-center">
                        <div id="News-Pagination"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

</html>